
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>注册界面</title>
<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Roboto:400,700" />
<link rel="stylesheet" href="../css/bootstrap.css">
<!-- https://fonts.google.com/specimen/Open+Sans -->
<link rel="stylesheet" href="../css/fontawesome.min.css" />
<!-- https://fontawesome.com/ -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<!-- https://getbootstrap.com/ -->
<link rel="stylesheet" href="../css/templatemo-style.css">
<!--
	Product Admin CSS Template
	https://templatemo.com/tm-524-product-admin
	-->


</head>
<script src="../js/jquery-3.3.1.min.js"></script>
<!-- https://jquery.com/download/ -->
<script src="../js/bootstrap.min.js"></script>
<!-- https://getbootstrap.com/ -->
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery-3.5.1.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
       <script type="text/javascript">
		function registerUser() {
            username = $("#username").val()
            password = $("#password").val()
			var arry;
            var username_md5 = md5(username);
            var password_md5 = md5(password);
            
            $.ajax({
                url: "http://localhost:8080/voting-system/registerServlet",
                type: "post",
                success:function (data) {
                	if(data.registerUser==false){
                		alert("注册失败！用户名重复")
                	}else{
                		alert("注册成功！")
                		window.location.href='../login.html'
                	}
                },
                dataType: "json",
                data:{username_md5:username_md5, password_md5: password_md5,username:username}
            });
        }
		</script>
<body>
	<div>
		<nav class="navbar navbar-expand-xl">
			<div class="container h-100">
				
				<button class="navbar-toggler ml-auto mr-0" type="button"
					data-toggle="collapse" data-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent" aria-expanded="false"
					aria-label="Toggle navigation">
					<i class="fas fa-bars tm-nav-icon"></i>
				</button>
			</div>
		</nav>
	</div>

	<div class="container tm-mt-big tm-mb-big">
		<div class="row">
			<div class="col-12 mx-auto tm-login-col">
				<div class="tm-bg-primary-dark tm-block tm-block-h-auto">
					<div class="row">
						<div class="col-12 text-center">
							<h2 class="tm-block-title mb-4">用户注册</h2>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-12">
							<form method="post" class="tm-login-form">
								<!-- 弹出警告窗 -->
						<div class="alert alert-warning alert-dismissible hide" role="alert">
							<button type="button" class="close fade in" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<br>
						</div>
						

								<!-- 登陆信息填写 -->
								
								<div class="form-group">
									<label for="username">用户名</label> <input name="username" 
										type="text" class="form-control validate" id="username"
										value="" required />
								</div>
								<div class="form-group mt-3">
									<label for="password">密码</label> <input name="password" 
										type="password" class="form-control validate" id="password"
										value="" required />
								</div>
                                 <div class="form-group mt-3">
									<label for="password">确认密码</label> <input name="pass_word" 
										type="password" class="form-control validate" id="pass_word"
										value="" required />
								</div>
								

								

								<!-- 提交部分 -->
								<div class="form-group mt-4">
									
									<button id="register" type="button" onclick="registerUser()" class="btn btn-primary btn-block text-uppercase">
										注册</button>
									
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</body>

</html>
<script >
var username;
var password;
var passwordr;
$("#username").blur(function () {
    username = $("#username").val()
    if (username == "") {
        $(".alert-warning").html("<strong>警告：</strong>用户名不能为空！");
        $(".alert-warning").removeClass("hide");
    } else {
        $(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
        $(".alert-warning").addClass("hide");
    }
});

//密码合法性验证
$("#password").blur(function () {
   password = $("#password").val();
    if (password == "") {
        $(".alert-warning").html("<strong>警告：</strong>密码不能为空！");
        $(".alert-warning").removeClass("hide");
    } else {
        $(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
        $(".alert-warning").addClass("hide");
    }
});
$("#pass_word").blur(function () {
	   passwordr = $("#pass_word").val();
	    if (passwordr != password) {
	        $(".alert-warning").html("<strong>警告：</strong>第二次密码错误！");
	        $(".alert-warning").removeClass("hide");
	    } else {
	        $(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
	        $(".alert-warning").addClass("hide");
	    }
	});

</script>


